import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react';
import request from '../../util/request'

export default class studentIndex extends Component {
    state = {
        barOption:{},
        lineOption:{}
    }

    componentDidMount(){
        //获取柱状图数据
        request.get('/api/bar').then(res => {
            if(res.code === 1){
                this.setState({
                    barOption:{
                        title: {
                            text: '今日班级成绩分布图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['理论', '技能']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                data: ['0-70','71-80','81-90','91-100']
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '理论',
                                type: 'bar',
                                data: res.data.theory //理论每个区间的人数
                            },
                            {
                                name: '技能',
                                type: 'bar',
                                data: res.data.skill //技能每个区间的人数
                            }
                        ]
                    }
                })
            }
        })
        //获取折线图数据
        request.get('/api/line',{num:localStorage.getItem('num')}).then(res => {
            if(res.code === 1){
                this.setState({
                    lineOption:{
                        title: {
                            text: '本月成绩曲线'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['理论', '技能']
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data:res.data.timeArr //时间
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value}'
                            }
                        },
                        series: [
                            {
                                name: '理论',
                                type: 'line',
                                data: res.data.theoryArr,//理论每天的分数组成数组
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name: '技能',
                                type: 'line',
                                data: res.data.skillArr, //技能每天的分数组成数组
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    }
                })
            }
        })
    }
    render() {
        let {barOption,lineOption} = this.state;
        return (
            <div>
                <ReactEcharts option={barOption} />

                <ReactEcharts option={lineOption} />
            </div>
        )
    }
}
